<template>
  <bui-page-layout ref="pageLayout" :is-z-paging="false">
    <view class="user-page">
      <view class="user-vip-hd">
        <view class="userInfo">
          <image :src="userInfo.headimgurl || '/static/image/icon-user-avatar.png'" class="avatar" />
          <view class="info">
            <view class="name"><text class="n">{{ userInfo.nickname}}</text></view>
            <view class="vip-icon">
              <image v-if="userInfo.levelIcon" :src="userInfo.levelIcon" class="icon" />
              <text class="t" @click="openRoutePath('pages/user/member_benefit')">查看会员权益</text>
              <image src="/static/image/icon-arrow-right.png" class="arrow"></image>
            </view>
          </view>
        </view>
        <view class="water">
          <view class="balance">
            <view class="balance-info">
              <text class="t">累积总收入(元)</text>
              <text class="amount">{{ userInfo.monthEarnings }}</text>
            </view>
            <view class="line"></view>
            <view class="balance-info flex">
              <text class="t">本月收益(元)</text>
              <text class="amount">{{ userInfo.totalEarnings }}</text>
            </view>
          </view>

        </view>
        <view class="user-menu">
          <view class="menu-item" @click="openRoutePath('pages/financial-statement/index')">
            <image src="/static/image/icon-user-list-1.png" class="icon"></image>
            <view class="name">
              <text class="text">账户流水</text>
            </view>
            <view class="flex-right">
              <image src="/static/image/icon-arrow-right.png" class="icon"></image>
            </view>
          </view>
          <view class="menu-item" @click="openRoutePath('pages/payment/index')">
            <image src="/static/image/icon-user-list-2.png" class="icon"></image>
            <view class="name">
              <text class="text">收款方式</text>
            </view>
            <view class="flex-right">
              <image src="/static/image/icon-arrow-right.png" class="icon"></image>
            </view>
          </view>
          <view class="menu-item" @click="openRoutePath('pages/withdraw/form')">
            <image src="/static/image/icon-user-list-3.png" class="icon"></image>
            <view class="name">
              <text class="text">申请提现</text>
            </view>
            <view class="flex-right">
              <image src="/static/image/icon-arrow-right.png" class="icon"></image>
            </view>
          </view>
        </view>
        <view class="user-menu">
          <view class="menu-item" @click="openRoutePath('pages/friend/index')">
            <image src="/static/image/icon-user-list-4.png" class="icon"></image>
            <view class="name">
              <text class="text">好友列表</text>
            </view>
            <view class="flex-right">
              <text class="text">共{{userInfo.recNum}}位好友</text>
              <view class="flex-right">
                <image src="/static/image/icon-arrow-right.png" class="icon"></image>
              </view>
            </view>
          </view>
          <view class="menu-item" @click="openRoutePath('pages/partner-benefit/index')">
            <image src="/static/image/icon-user-list-5.png" class="icon"></image>
            <view class="name">
              <text class="text">合伙人</text>
            </view>
            <view class="flex-right">
              <image v-if="userInfo.partnerAuditStatus === 2" src="/static/image/icon-partner-fail.png" class="fail" />
              <text class="text">{{ userInfo.partnerAuditRes }}</text>
              <image src="/static/image/icon-arrow-right.png" class="icon"></image>
            </view>
          </view>
          <view class="menu-item" @click="openRoutePath('pages/setup/index')">
            <image src="/static/image/icon-user-list-6.png" class="icon"></image>
            <view class="name">
              <text class="text">账户设置</text>
            </view>
            <view class="flex-right">
              <template v-if="!userInfo.isBindMobile">
                <image src="/static/image/icon-menu-info.png" class="info" />
                <text class="text">未绑定手机</text>
              </template>
              <image src="/static/image/icon-arrow-right.png" class="icon"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <template v-slot:footer>
      <b-tabbar :current="1"></b-tabbar>
    </template>
  </bui-page-layout>
</template>
<script setup>
import { ref, onMounted, computed } from "vue";
import { onShow, onHide, onReady } from "@dcloudio/uni-app";
import { globalStore } from "@/store";
const gStore = globalStore();
var userInfo = ref({});
const openRoutePath = (path) => {
  uni.$u.route({
    url: path,
  });
};
userInfo = computed(() => {
  return gStore.userInfo;
});

onShow(() => {
  console.log("onShow");
  gStore.getUserInfo();
});
</script>
<style lang="scss">
page {
  background-color: #f6f6f8;
}
.user-page {
  padding: 28rpx 28rpx 130rpx;
  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 270rpx;
    background-color: #232f3f;
  }
}
.user-vip-hd {
  .userInfo {
    display: flex;
    .avatar {
      width: 112rpx;
      height: 112rpx;
      border-radius: 112rpx;
      border: 8rpx solid rgba(255, 255, 255, 0.4);
    }
    .info {
      flex: 1;
      padding-left: 20rpx;
      .name {
        padding-top: 10rpx;
        .n {
          font-size: 28rpx;
          font-weight: 600;
          color: #fff;
          position: relative;
        }
      }
      .vip-icon {
        padding-top: 10rpx;
        display: flex;
        align-items: center;
        position: relative;
        .icon {
          width: 140rpx;
          height: 40rpx;
        }
        .arrow {
          width: 32rpx;
          height: 32rpx;
        }
        .t {
          color: rgba(255, 255, 255, 0.6);
          font-size: 28rpx;
          padding: 0 0 0 20rpx;
        }
      }
    }
  }
  .water {
    position: relative;
    margin-top: 30rpx;
    .balance {
      display: flex;
      padding: 20rpx 30rpx;
      align-items: center;
      background: linear-gradient(94deg, #ff9f0f 21.78%, #ffa132 75.85%);
      border-radius: 16rpx;
      &::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        background-image: url("/static/image/icon-user-hd.png");
        background-repeat: no-repeat;
        background-size: contain;
        width: 180rpx;
        height: 154rpx;
      }
    }
    .flex {
      flex: 1;
    }
    .balance-info {
      padding: 10rpx 0;
      display: flex;
      flex-direction: column;
      .t {
        color: rgba(255, 255, 255, 0.7);
        font-family: PingFang SC;
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;
      }
      .amount {
        font-size: 40rpx;
        font-weight: bold;
        padding-top: 10rpx;
        font-family: PingFang SC;
        color: #fff; /* Example color */
      }
    }
    .line {
      width: 2rpx;
      height: 90rpx;
      margin: 0 55rpx;
      background-color: rgba(255, 255, 255, 0.3);
    }
  }
  .user-menu {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    margin-top: 20rpx;
    padding: 10rpx 0;
    border-radius: 12rpx;
    .menu-item {
      display: flex;
      align-items: center;
      padding: 24rpx 20rpx;
      .name {
        flex: 1;
        padding-left: 16rpx;
        .text {
          font-family: PingFang SC;
          font-size: 30rpx;
        }
      }
      .icon {
        width: 50rpx;
        height: 50rpx;
      }
      .flex-right {
        display: flex;
        align-items: center;
        .info,
        .icon {
          width: 32rpx;
          height: 32rpx;
        }
        .fail {
          width: 36rpx;
          height: 36rpx;
        }
        .text {
          font-size: 28rpx;
          font-style: normal;
          font-weight: 400;
          color: #9eb0c5;
          padding: 0 24rpx 0 8rpx;
        }
      }
    }
  }
}
</style>
